<template>
	<view class="pageBox">
		<image :src="info.img" mode="widthFix"></image>
		<!-- 下载海报 -->
		<view class="downImg" @click="downImg"></view>
		<!-- 复制文案 -->
		<view class="downText" @click="copyText"></view>
		<view class="imgBox"  >
			<view class="imgLeft" @click="lookBigImg">
				<image :src="info.demoImg" mode="aspectFit"></image>
				<view class="imgText">
					截图示例
				</view>
			</view>
			<view class="imgLeft" @click="openUpload">
				<image :src="imgUploadUrl" mode="aspectFit"></image>
				<view class="imgText">
					您的截图
				</view>
			</view>
		</view>
		<view class="btnBox" @click="addImg">
			提交截图
		</view>
		<view style="width: 100%;height: 60rpx;"></view>
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
	</view>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				type:'',
				id:'',
				info:{},
				isUpload:false,
				imgUrl:'',
				imgUploadUrl:'../../static/imgupload.jpg',
				imgUploadId:0,
				imgDemo:'',
			}
		},
		onLoad(e){
			var _this=this;
			if(e.id){
				this.id=e.id;
				this.type=e.type;
			}
			
			// _this.imgUrl= _this.$baseURL+'/uploads/share_wx.jpg'
			// _this.imgDemo= _this.$baseURL+'/uploads/share_wx.jpg'
		},
		onShow() {
			var _this=this;
			_this.getTaskInfo();
		},
		onShareAppMessage(res) {
			return {
				title: '给你推荐一个好用记工记账小程序',
				path: '/pages/index/index?leader_id=' + this.userInfo.id,
				imageUrl: '/static/sharePic.jpg',
			}
		},
		methods: {
			
			//图片预览
			lookBigImg(){
				var _this=this;
				var urls=[];
				urls[0]=_this.info.demoImg;
				uni.previewImage({
					urls:urls,
				})
			},
			
			addImg(){
				var _this=this;
				if(_this.imgUploadId==0){
					uni.showToast({ //提示
						title: '请上传截图',
						icon:'error'
					})
					return
				}
				
			
				_this.$u.post('/api/project.task/addImg', {
					id:_this.id,
					type:_this.type,
					imgId:_this.imgUploadId,
				}).then(res => {
					uni.showModal({
						content:'截图上传成功，请等待管理员审核',
						showCancel:false,
						success(){
							uni.navigateBack()
						}
					})
				}).catch(res => {
					console.log(res);
				})
				
				
			},
			// 获取信息
			getTaskInfo() {
				var _this = this;
				_this.$u.get('/api/project.task/taskDetail', {
					id:_this.id,
					type:_this.type
				}).then(res => {
					_this.info = res.data;
				}).catch(res => {
					console.log(res);
				})
			},
			
			
			copyText(){
				console.log('1111')
				uni.setClipboardData({
					data: '微信搜索“记工本”小程序，轻松记工，数据永久保存', //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					},
				})
			},
			
			downImg(){
				var _this=this;
				uni.showLoading({
					title: '加载中'
				});
				uni.downloadFile({
					url: _this.info.downImg, // 下载url
					success(res) {
						console.log(res)
						var tempFilePath = res.tempFilePath;
						var pathArray=tempFilePath.split('.');
						
						console.log(tempFilePath)
						uni.hideLoading()
						if(pathArray[1]=='mp4'){
							uni.saveVideoToPhotosAlbum({
							  filePath: tempFilePath,
							  success: function (resData) {
								  console.log(resData)
								 uni.showToast({
								 	title:'保存成功'
								 })
							  }
							});
						}else{
							uni.saveImageToPhotosAlbum({
							  filePath: tempFilePath,
							  success: function (resData) {
								  console.log(resData)
								 uni.showToast({
								 	title:'保存成功'
								 })
							  }
							});
						}
					
						
					}
				})
			},
			
			
			/**
			 * 上传图片 start
			 */
			// 打开上传图片
			openUpload() {
				this.isUpload = true;
			},
			
			// 获取上传的图片
			getImgsFunc(e) {
				console.log("==获取上传的图片==");
				console.log(e);
				let _this = this;
				if (e && typeof(e) != 'undefined') {
					_this.imgUploadUrl = e[0].url;
					_this.imgUploadId = e[0].imgID;
				}
				_this.isUpload = false;
			},
			/**
			 * 上传图片 end
			 */

			
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.pageBox{
		position: relative;
	}
	.pageBox image{
		width: 100%;
	}
	
	.downImg{
		position: absolute;
		top: 1150rpx;
		width: 100%;
		height: 100rpx;
		
	}
	
	.downText{
		position: absolute;
		top: 1330rpx;
		width: 100%;
		height: 100rpx;
		
	}
	
	.btnBox{
		width: 690rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background-color: #327fe9;
		color: #fff;
		margin: 40rpx auto;
		border-radius: 10rpx;
	}
	.imgBox{
		
		
		
		margin: 20rpx auto;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 10rpx;
	}
	
	.imgLeft{
		width: 326rpx;
		float: left;
		border: 2rpx solid #e2e2e2;
		height: 470rpx;
		margin-left: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		text-align: center;
		line-height: 50rpx;
	}
	.imgLeft image{
		width: 100%;
		height:  400rpx;;
	}
</style>
